<template>
  <div class="center-left">
    <ul>
      <li
        :class="{ active: activeId === -1 }"
        style="margin:0"
        @click="goCategoryList(-1, 'home')"
      >
        <a href="javascript:void(0);">Home</a>
        <!-- <img src="@/assets/loginImgs/next.png" alt=""> -->
      </li>
      <li
        v-for="item in categoryList"
        :key="item.id"
        :class="{ active: item.id === activeId }"
        @click="goCategoryList(item.id, item.name)"
      >
        <a href="javascript:void(0);">{{ item.name }}</a>
        <!-- <img src="@/assets/loginImgs/next.png" alt=""> -->
      </li>
      <!-- <li @click="nextMenu">
        <a href="javascript:void(0);">The order</a>
        <img src="@/assets/loginImgs/next.png" alt="">
        <transition name="el-zoom-in-top">
          <ul v-if="isShow" class="nextnum">
            <li @click.stop="threeMenu">
              <span>Package delivery</span>
              <img src="@/assets/loginImgs/twoNext.png" alt="">
              <transition name="el-zoom-in-top">
                <ul v-if="threeMenuShow" class="threeMenu">
                  <li>
                    <router-link to="/login/help3">
                      <span>Split package (new)</span>
                    </router-link>
                  </li>
                </ul>
              </transition>
            </li>
            <li>All orders</li>
            <li>Manually create order</li>
            <li>Rules of order</li>
            <li>Forecast sheet management</li>
            <li>The delivery message set</li>
            <li>Did not get to the Internet</li>
            <li>Offline purchase</li>
          </ul>
        </transition>
      </li> -->
    </ul>
  </div>
</template>

<script>
import { helpCategoryList } from '@/api/article';
// import bus from '@/utils/bus'
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeId: -1,
      isShow: false,
      categoryList: [],
      threeMenuShow: false
    };
  },
  mounted() {
    this.getCategoryList();
    this.$nextTick(function() {
      if (
        document.documentElement.clientHeight >
        document.getElementsByClassName('content')[0].clientHeight
      ) {
        document.getElementsByClassName('content')[0].style.minHeight =
          document.documentElement.clientHeight -
          document.getElementsByClassName('header')[0].clientHeight -
          document.getElementsByClassName('footer')[0].clientHeight +
          'px';
      } else {
        document.getElementsByClassName('content')[0].style.minHeight =
          950 + 'px';
      }
    });
  },
  methods: {
    nextMenu() {
      this.isShow = !this.isShow;
    },
    threeMenu() {
      this.threeMenuShow = !this.threeMenuShow;
    },
    getCategoryList() {
      helpCategoryList().then((res) => {
        this.categoryList = res.data;
      });
    },
    goCategoryList(id, name) {
      this.activeId = id;
      this.$emit('category', { id: id, name: name, type: '' });
    }
    // goCategoryHome() {
    //   this.$router.push({ path: '/login/helpPage' })
    // }
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  margin-top: 70px;
  padding-bottom: 30px;
  background: #f9f9f9;
}
.center {
  &-left {
    width: 240px;
    padding-bottom: 40px;
    display: inline-block;
    vertical-align: top;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      // max-height: calc(100vw / 2.95);
      overflow-y: auto;
      .active {
        color: #ffffff;
        background: #26c375;
      }
      li {
        font-size: 18px;
        padding: 10px 23px;
        // margin: calc(100vw / 160) 0 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
        border-bottom: 1px solid #e6e6e6;
        img {
          width: calc(100vw / 192);
          height: calc(100vw / 120);
          float: right;
          margin-top: calc(100vw / 220);
          margin-right: calc(100vw / 120);
        }
        .nextnum {
          margin-left: -9.5%;
          margin-top: calc(100vw / 64);
          background: #ffffff;
          li {
            color: rgba(38, 195, 117, 1);
            text-align: center;
            margin: 0;
            white-space: nowrap;
            padding: calc(100vw / 96) 0;
            font-size: calc(100vw / 106.67);
            img {
              width: calc(100vw / 150);
              height: calc(100vw / 240);
            }
          }
          .threeMenu {
            border-bottom: 1px solid #e6e6e6;
          }
        }
      }
    }
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
